<template>
  <div class="homePage store-list">
    <!--------------先隐藏----------------->
    <div class="top-choose">
      <div class="chooseBox">
        <div :class="choosetype?'fl choosed':'fl choose'" @click="chooseType">{{type}}
        </div>
        <div class="fl line"></div>
        <div :class="choosecity?'fl choosed':'fl choose'" @click="chooseCity">{{location}}
        </div>
      </div>
      <div v-if="choose" class="chooseContent">
       <ul v-if="choosetype">
        <li v-for='type in typeList' @click='sureType(type)'>{{type}}</li>
        </ul>
        <ul v-if="choosecity">
          <li v-for='city in cityList' @click='sureCity(city)'>{{city}}</li>
        </ul>
      </div>
    </div>
    <!--------------先隐藏----------------->
  <storeListsVue ref='storeList' :storeLists="storeLists"></storeListsVue>
  <bottomMenu :menuType="menuType"></bottomMenu>
</div>
</template>


<script>
  import {MP} from '../../common/map.js'
  import storeListsVue from './getStoreList.vue'
  import {showSelOption} from '@/common/utils'
  import {getStoreList} from '@/controller'
  import bottomMenu from './bottomMenu.vue'
  export default {
    name: 'storeList',
    data () {
      return {
       menuType:2, // 2代表门店
       storeLists: [],
       choosetype:false,
       choosecity:false,
       choose:false,
       location: '城市',
       ak:'7b7gOnuKj3dc3F0GZ1xykBaKneMPW2Fg',
       type:'类型',
       typeList: ['不限', '加盟店', '直营店'],
       cityList: [],
     }
   },
   components: {
    'bottomMenu': bottomMenu,
    'storeListsVue': storeListsVue
  },
  methods: {
    chooseType(){
      this.choose=true;
      this.choosetype=true;
      this.choosecity=false;
    },
    chooseCity(){
      this.choose=true;
      this.choosecity=true;
      this.choosetype=false;
    },
    sureType(type){
      this.choose=false;
      this.choosetype=false;
      this.type=type;
      this.init();
    },
    sureCity(city){
      this.choose=false;
      this.choosecity=false;
      this.location=city;
      this.init();
    },
    init() {
      this.location=localStorage.getItem('location');
      let city=this.location;
      let type=this.type;
      this.storeLists = [];
      this.cityList=[];
        //请求门店列表
        getStoreList({type,city}).then((res) => {
          if (res.code === 0) {
            this.storeLists = this.storeLists.concat(res.data);
            Array.prototype.distinct = function (){
             var arr = this,
              i,
              obj = {},
              result = [],
              len = arr.length;
             for(i = 0; i< arr.length; i++){
              if(!obj[arr[i].storeLocation]){ //如果能查找到，证明数组元素重复了
               obj[arr[i].storeLocation] = 1;
               result.push(arr[i].storeLocation);
              }
             }
             console.log(result);
             return result;
            };
            this.cityList =  this.storeLists.distinct();
          } else {
            this.$toast.center('鉴权失败');
          }
        })
      },
    },
    mounted() {
      this.$nextTick(function(){
        var _this = this;
        MP(_this.ak).then(BMap => {
          var myCity = new BMap.LocalCity();
          myCity.get(function(result){
            localStorage.setItem('location',result.name)
          });
        });
      });
      this.init();
    },
  }

</script>
<style scoped>
.homePage{
  position: absolute;
  width: 100%;
  height: 100%;
}
.top-choose{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
  padding: 1% 0;
}
.chooseBox,.chooseContent{
  width: 100%;
  display: flex;
  align-items: center;
}
.choose{
  width: 15%;
  background: url(/static/wechat/images/selectDown@2x.png) no-repeat scroll right center transparent;
  background-size: 12px;
  padding: 0 6% 0 6%;
}
.choosed{
  color: #ffb518;
  width: 15%;
  background: url(/static/wechat/images/selectUp@2x.png) no-repeat scroll right center transparent;
  background-size: 12px;
  padding: 0 6% 0 6%;
}
ul{
  width: 100%;
  padding: 2% 0%;
}
ul li{
  list-style-type: none;
  line-height: 30px;
  padding: 0 6%;
}
ul li:focus,ul li:hover{
  background: #f6f6f6;
  color: #ffb518;
}
.line{
  width: 2px;
  height: 14px;
  margin: 0 5%;
  background: #dedede;
}
</style>
